<script setup lang="ts">

defineOptions({ name: 'CorrectDetail' });

const props = defineProps({
  correctUser: {
    type: Object,
    default: () => {}
  },
  correctType: {
    type: String,
    default: ''
  },
  listData: {
    type: Array,
    default: () => []
  },
  createIdx: {
    type: Function,
    default: () => { }
  },
});

const scrollToQuestion = (id: string) => {
  const el = document.getElementById(`question-${id}`)
  if (el) {
    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }
}

const getRateStyle = (rateStr: string) => {
  const rate = !!rateStr ? Number(rateStr.replace('%', '')) : 0
  return rate < 80 ? 'text-[#E5484D]' : 'text-[#30A46C]'
}

const setCorrect = (result: string, q: any) => {
  if (props.correctUser?.status === 'published') return
  switch (result) {
    case 'allCorrect':
      q.result = 'allCorrect'
      q.actualScore = q.score
      break
    case 'partCorrect':
      q.result = 'partCorrect'
      q.actualScore = q?.partScore || Math.floor(q.score * 0.5)
      break
    case 'wrong':
      q.result = 'wrong'
      q.actualScore = 0
      break
  }
  emit('scoreUpdate', {score: q.actualScore, question: q})
}

const setScore = (val: number, q: any) => {
  emit('scoreUpdate', {score: val, question: q})
}
const emit = defineEmits(['scoreUpdate'])
</script>
<template>
  <section class="h-full overflow-scroll">
    <div v-if="props.correctType === 'aiReadyCorrect'" class="text-[12px] text-[#909399] leading-[20px] mb-[16px]">{{
      $t('exam.aiRemarkTxt') }}</div>
    <div class="qtyList border border-color:#DCDFE6 rounded-[8px] p-[12px] mb-[16px]"
      v-for="(item, idx) in props.listData as any" :key="idx">
      <div class="title mb-[16px]">{{`${props.createIdx(idx)}、${item.name}` }}</div>
      <div class="question-item mb-[12px] cursor-pointer" v-for="(q, qIdx) in item?.questions" :key="qIdx"
        :id="`answer-${q?.id}`">
        <div class="q-war flex items-center justify-between text-[12px] leading-[22px] text-center">
          <div class="flex items-center">
            <div @click="scrollToQuestion(q?.id)" class="flex items-center border border-color:#DCDFE6 rounded-[4px] mr-[8px]"
              :class="[props.correctType === 'aiReadyCorrect' ? 'w-[72px]' : 'w-[22px]']">
              <span class="block text-[#191919] w-[20px] bg-[#DCDFE6]"
                :class="[props.correctType === 'aiReadyCorrect' ? 'mr-[3px]' : 'mr-0']">{{ qIdx + 1 }}</span>
              <span v-if="props.correctType === 'aiReadyCorrect'" class="pr-[1px]"
                :class="getRateStyle(q?.correctConfidenceRate)">AI
                {{ q?.correctConfidenceRate }}</span>
            </div>
            <span @click="setCorrect('allCorrect', q)" class="block w-[42px] h-[22px] rounded-[4px] text-[#FFFFFF] hover:font-bold mr-[4px]"
              :class="[q.result === 'allCorrect' ? 'bg-[#30A46C]' : 'bg-[#DCDFE6]']">{{
                $t('exam.allCorrectTxt') }}</span>
            <div class="w-[64px] h-[22px] mr-[4px]">
              <span @click="setCorrect('partCorrect', q)" v-if="item.type === 'fillBlank' || item.type === 'essay' || item.type === 'checkbox' && !!q.partScore"
                class="block w-full h-full rounded-[4px] text-[#FFFFFF] hover:font-bold"
                :class="[q.result === 'partCorrect' ? 'bg-[#FB9A0E]' : 'bg-[#DCDFE6]']">{{
                  $t('exam.partCorrectTxt') }}</span>
            </div>
            <span @click="setCorrect('wrong', q)" class="block w-[40px] h-[22px] rounded-[4px] text-[#FFFFFF] hover:font-bold"
              :class="[q.result === 'wrong' ? 'bg-[#E5484D]' : 'bg-[#DCDFE6]']">{{ $t('exam.wrongTxt')
              }}</span>
          </div>
          <div class="flex items-center">
            <span class="block w-auto h-[22px] text-[#595959] mr-[4px]">{{ $t('exam.fullScoreTxt') }}</span>
            <span class="block text-right max-w-[60px] h-[22px] text-[#191919]">{{ q.score }}{{
              $t('exam.gradeTxt') }}{{$t('exam.getScoreTxt')}}</span>
            <el-input-number :readonly="q?.type === 'radio' || q?.type === 'trueFalse' || props.correctUser?.status === 'published'" :controls="false" size="small" style="width:32px" :min="0" :max="q.score" :precision="1"
              v-model.number="q.actualScore" class="ml-[5px] mr-[5px]"
              @change="(val: number) => setScore(val, q)"></el-input-number>
            <span>{{ $t('exam.gradeTxt') }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<style lang="scss"></style>
